<template>
  <view class="go-buy-page">
    <view class="booking-info">
      <view class="card">
        <image
          style="width: 100%; height: 320rpx; border-radius: 16rpx;display: block"
          :src="img_api + topImage"
        ></image>
        <view class="info">
          <view class="title u-line-1">{{ info.name }}</view>
        </view>
      </view>
      <view class="opt" @click="callPhone">
        <view class="item nav" @click="openNav" v-if="false">
          <image
            class="icon"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img12.png"
          ></image>
          <view class="text">位置</view>
        </view>
        <view class="line" v-if="false"></view>
        <view class="item phone">
          <image
            class="icon"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img11.png"
          ></image>
          <view class="text">联系</view>
        </view>
      </view>
      <!--        预约详情-->
      <view class="reverse-detail">
        <view class="date">
          <view class="label">预约日期</view>
          <view class="val"
            >{{ time.month + time.day + "日"
            }}<text class="tags">{{ time.weekDays }}</text></view
          >
        </view>
        <view class="times">
          <view class="label">预约时段</view>
          <view class="list">
            <view class="item" v-for="(item, index) in voList" :key="index">
              <view class="st">{{ item.periodTimeStart }}</view>
              <view class="zhi">至</view>
              <view class="ed">{{ item.periodTimeEnd }}</view>
              <view class="tag">{{ item.num }}场位</view>
            </view>
          </view>
        </view>
      </view>
      <view class="price">
        <view class="label">合计金额</view>
        <view class="val">¥{{ totalPrice }}</view>
      </view>
    </view>

    <view class="confirm-btn-box">
      <view class="btn" @click="confirmReserve">去支付</view>
    </view>
  </view>
</template>

<script>
import { addOtherOrder } from "@/config/api";
import { payTransactions } from "@/utils";

export default {
  data() {
    return {
      info: {},
      voList: [],
      time: {},
      totalPrice: "",
      isSubmitting: false,
    };
  },
  computed: {
    topImage() {
      return (
        (this.info && this.info.imgList && this.info.imgList[0]?.attaPath) || ""
      );
    },
  },
  onLoad() {
    const {
      voList = [],
      detail = {},
      time = "",
      totalPrice = "0.00",
    } = this.$store.state.ticketReserveInfo;
    this.voList = voList;
    this.info = detail;
    this.time = time;
    this.totalPrice = totalPrice;
  },
  methods: {
    // 拨打电话
    callPhone() {
      this.toURL(this.info.venuesPhone, {}, { type: "phone" });
    },
    openNav() {},
    // 确认下单
    confirmReserve() {
      if (this.isSubmitting) {
        uni.showToast({ title: "正在拉起支付", icon: "none" });
        return;
      }
      this.isSubmitting = true;
      const { venuesId } = this.info;
      const ticOrderDetailAddDTOList = this.voList.map((item) => {
        return {
          orderTicketType: 3,
          ticketId: venuesId,
          ticConfigId: item.ticVenuesConfigId,
          periodId: item.periodId,
          ticketCount: item.num,
          ticketMoney: item.periodPrice,
        };
      });

      return addOtherOrder({
        ticOederAddDTO: {
          orderTicketType: 3,
          ticketId: venuesId,
          stcokDate: this.time.venuesDate,
        },
        ticOrderDetailAddDTOList,
      }).then(({ code, data }) => {
        if (code === 200) {
          if (Number(this.totalPrice) === 0) {
            this.toURL(
              "/page_index/booking-detail/result",
              { state: 1, id: data },
              { type: "redirect" }
            );
            this.isSubmitting = false;
            return;
          }
          return this.getPayOrderInfo(data).finally(() => {
            this.isSubmitting = false;
          });
        } else {
          this.isSubmitting = false;
        }
      });
    },
    // 支付前获取订单详细
    getPayOrderInfo(orderId) {
      return payTransactions(orderId)
        .then(() => {
          this.toURL(
            "/page_index/booking-detail/result",
            { state: 1, id: orderId },
            { type: "redirect" }
          );
        })
        .catch(({ code }) => {
          this.toURL(
            "/page_index/booking-detail/result",
            { state: 0, id: orderId },
            { type: "redirect" }
          );
        });
    },
  },
};
</script>

<style lang="scss">
.go-buy-page {
  min-height: 100vh;
  background-color: #fff;
  padding: 24rpx 32rpx 0;

  .booking-info {
    padding-bottom: calc(120rpx + env(safe-area-inset-bottom) + 50rpx);
  }

  .card {
    position: relative;
    width: 686rpx;
    height: 320rpx;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    box-shadow: 0rpx 2rpx 6rpx -2rpx rgba(85, 68, 59, 0.3),
      0rpx 4rpx 10rpx -2rpx rgba(115, 90, 70, 0.25);

    &:before {
      display: block;
      top: 0;
      left: 0;
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      z-index: 1;
      border-radius: 16rpx;
    }

    .info {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 56rpx 24rpx 20rpx;
      z-index: 2;
      width: 100%;
      border-radius: 16rpx;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.6) 100%
      );

      .title {
        font-size: 28rpx;
        font-weight: 500;
        color: #ffffff;
        line-height: 40rpx;
        text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .opt {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24rpx;
    height: 88rpx;
    background: #f9f4f2;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .item {
      display: flex;
      align-items: center;

      .icon {
        display: block;
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }

      .text {
        font-size: 28rpx;
        font-weight: 500;
        color: #ff5000;
        line-height: 40rpx;
      }
    }

    .line {
      background-color: #fcb296;
      width: 2rpx;
      height: 24rpx;
      margin-left: 124rpx;
      margin-right: 124rpx;
    }
  }

  .reverse-detail {
    margin-top: 40rpx;
    display: flex;
    padding-bottom: 40rpx;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

    .label {
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 34rpx;
      margin-bottom: 16rpx;
      text-align: right;
    }

    .date {
      margin-right: 32rpx;

      .label {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.5);
        line-height: 34rpx;
        margin-bottom: 16rpx;
        text-align: left;
      }
      .val {
        display: flex;
        align-items: center;
        font-size: 36rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.9);
        line-height: 50rpx;
        .tags {
          display: block;
          font-size: 24rpx;
          font-weight: 500;
          color: #ff5000;
          line-height: 34rpx;
          padding: 0 4rpx;
          background: rgba(255, 80, 0, 0.102);
          border-radius: 2rpx 2rpx 2rpx 2rpx;
          margin-left: 8rpx;
        }
      }
    }

    .times {
      margin-left: auto;

      .item {
        display: flex;
        align-items: center;

        .st,
        .ed {
          font-size: 36rpx;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.9);
          line-height: 50rpx;
          margin-right: 8rpx;
        }

        .zhi {
          padding: 0 4rpx;
          background: rgba(255, 80, 0, 0.102);
          border-radius: 2rpx 2rpx 2rpx 2rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #ff5000;
          line-height: 32rpx;
          margin-right: 8rpx;
        }

        .tag {
          padding: 0 4rpx;
          background: #ff5000;
          border-radius: 2rpx 2rpx 2rpx 2rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #fff201;
          line-height: 32rpx;
        }
      }
    }
  }

  .price {
    display: flex;
    justify-content: space-between;
    padding: 34rpx 0;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

    .label {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 40rpx;
    }

    .val {
      font-size: 40rpx;

      font-family: D-DIN-Bold;
      font-weight: 700;
      color: #ff5000;
      line-height: 44rpx;
      -webkit-background-clip: text;
    }
  }

  .confirm-btn-box {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 14rpx 58rpx 0rpx rgba(100, 100, 111, 0.2);
    box-sizing: content-box;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 686rpx;
      height: 80rpx;
      background: #ff5000;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #ffffff;
      line-height: 40rpx;
    }
  }
}
</style>
